{extend name="public/base" /}
{block name="style"}
<style>
    /* Tab栏样式 */
    .tabs {
        display: flex;
        background-color: white;
        border-bottom: 1px solid #f5f5f5;
    }

    .tab-item {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-size: 14px;
        color: #666;
        position: relative;
        cursor: pointer;
    }

    .tab-item.active {
        color: #1AAD19;
    }

    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #1AAD19;
    }

    /* 列表项样式 */
    .agent-list {
        background-color: white;
        margin: 10px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .agent-list-header {
        display: flex;
        padding: 12px 15px;
        background-color: #f9fafb;
        border-bottom: 1px solid #f5f5f5;
        font-size: 13px;
        color: #888;
    }

    .header-item {
        flex: 1;
        text-align: center;
    }

    .header-item:first-child {
        text-align: left;
        flex: 2; /* 代理信息占更大宽度 */
    }

    .agent-list-item {
        display: flex;
        padding: 12px 15px;
        border-bottom: 1px solid #f5f5f5;
        align-items: center;
        transition: background-color 0.2s;
    }

    .agent-list-item:last-child {
        border-bottom: none;
    }

    .agent-list-item:hover {
        background-color: #f9f9f9;
    }

    .agent-info {
        flex: 2;
        display: flex;
        flex-direction: column;
    }

    .agent-name-level {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
    }

    .agent-name {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-right: 8px;
    }

    .agent-level-tag {
        display: inline-block;
        padding: 2px 6px;
        background-color: #e8f5e9;
        color: #1AAD19;
        font-size: 11px;
        border-radius: 3px;
    }

    .agent-email {
        font-size: 12px;
        color: #666;
    }

    .agent-data {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #333;
    }

    .agent-data.profit {
        color: #1AAD19;
        font-weight: 600;
    }

    /* 认证状态样式 - 四种状态 */
    .verify-status {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
    }

    .verify-pending {
        background-color: #fff8e1;
        color: #ff9800;
    }

    .verify-unverified {
        background-color: #f0f2f5;
        color: #8c8c8c;
    }

    .verify-passed {
        background-color: #e8f5e9;
        color: #1AAD19;
    }

    .verify-rejected {
        background-color: #ffebee;
        color: #f5222d;
    }

    /* 空状态样式 */
    .empty-state {
        padding: 40px 0;
        text-align: center;
        color: #999;
    }

    .empty-state i {
        font-size: 48px;
        margin-bottom: 15px;
        color: #ddd;
    }

    .empty-state p {
        font-size: 14px;
    }
</style>

{/block}
{block name="content"}
<!-- 头部导航（与其他页面统一） -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">代理列表</h1>
</div>

<div class='weui-content'>
    <!-- Tab切换栏 -->
    <div class="tabs">
        <div class="tab-item  {if $level==1}active{/if}" data-level="1" onclick="switchAgent(1,this)">一级代理</div>
        <div class="tab-item {if $level==2}active{/if}" onclick="switchAgent(2,this)">二级代理</div>
        <div class="tab-item {if $level==3}active{/if}" onclick="switchAgent(3,this)">三级代理</div>
    </div>

    <!-- 代理列表 -->
    <div class="agent-list">
        <div class="agent-list-header">
            <div class="header-item">代理信息</div>
            <div class="header-item">认证状态</div>
            <div class="header-item">邀请时间</div>
            <div class="header-item">充值金额</div>
        </div>
       <div class="record-list" style="height:80vh; overflow:auto;">

       </div>
    </div>
</div>


{/block}
{block name="script"}
<script>
    let page = 1;
    let loading = false; // 加载状态锁
    let level = 1;
    let switchTimer = null; // Tab切换防抖计时器
    let scrollTimer = null; // 滚动防抖计时器
    let requestId = 0; // 请求唯一标识（替代abort()）

    // Tab切换（防抖+状态重置）
    function switchAgent(l, obj) {
        // 清除上一次切换计时
        clearTimeout(switchTimer);

        // 生成新的请求标识，使旧请求失效
        requestId++;

        switchTimer = setTimeout(() => {
            // 重置列表和状态
            $(".record-list").empty();
            loading = false;
            page = 1;
            level = l;
            load(page, level, obj);
        }, 300); // 300ms防抖，避免快速切换
    }

    // 滚动加载更多（防抖+节流）
    $(".record-list").infinite().on("infinite", function() {
        if (loading) return; // 加载中直接拦截

        // 清除上一次滚动计时
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            if (loading) return; // 二次检查

            loading = true; // 上锁
            page++;
            load(page);
        }, 500); // 500ms防抖，减少无效请求
    });

    // 初始加载第一个Tab
    $(function() {
        // 正确获取第一个带有active类的Tab（或默认第一个Tab）
        const $tabs = $(".tabs").find("div");
        // 优先选择已激活的Tab，若无则默认第一个
        const $firstTab = $tabs.filter(".active").length ? $tabs.filter(".active") : $tabs.eq(0);

        // 绑定点击事件（确保触发时传递正确的level和当前Tab元素）
        $firstTab.on("click", function() {
            // 假设第一个Tab对应的层级是1，可根据实际需求调整
            switchAgent(1, this);
        });

        // 主动触发点击，加载初始数据
        $firstTab.trigger("click");
    });

    // 加载数据（兼容无abort()/fail()的post方法）
    function load(page, level, obj) {
        $('.load-more').show();
        const currentId = requestId; // 记录当前请求标识

        // 调用post方法（假设已按之前的方案改造，支持错误回调）
        post(
                "/agent-list.html",
                { page, limit: 11, field: "id", order: "desc", level },
                // 成功回调
                function(res) {
                    // 忽略过期请求（已被新请求替代）
                    if (currentId !== requestId) return;

                    // 重置状态
                    loading = false;
                    $('.load-more').hide();

                    if (res !== "") {
                        $(".record-list").append(res);
                    } else {
                        // 无更多数据：锁定加载+回退页码
                        loading = true;
                        page--;
                        $(".record-list").find(".weui-cells__title").remove();
                        $(".record-list").append(`<div class="weui-cells__title"><p class='center-div'>已无更多数据</p></div>`);
                    }

                    // 更新Tab激活状态（确保obj存在）
                    if (obj && $(obj).length) {
                        $(obj).parent().find(".tab-item").removeClass("active");
                        $(obj).addClass("active");
                    }
                },
                // 错误回调（网络错误/业务失败时触发）
                function() {
                    if (currentId !== requestId) return; // 忽略过期请求

                    // 错误处理：重置状态+回退页码
                    loading = false;
                    $('.load-more').hide();
                    page--;
                }
        );
    }
</script>
{/block}
